<script setup>
import {
  ref,
  getCurrentInstance,
  reactive,
  computed,
  onMounted,
  watch,
} from "vue";
import * as echarts from "echarts";
import api from "@/api";
import _ from "lodash";
import SafeScoreDetail from "./SafeScoreDetail.vue";
import ProcessScoreDetail from "./ProcessScoreDetail.vue";
import EnvironmentScoreDetail from "./EnvironmentScoreDetail.vue";
import PdfLoader from "@/utils/html2pdf";
import moment from "moment";
const { proxy } = getCurrentInstance();

const props = defineProps({
  currentReportType: "",
  currentDate: "",
  reportId: "",
});

//模块显示选择
const defaultProps = {
  children: "children",
  label: "label",
};
//安全树形
const safeTree = reactive([
  {
    id: "sm",
    label: "安全模块",
    children: [
      {
        id: "s1",
        label: "本月指数趋势",
      },
      {
        id: "s2",
        label: "本月事件发生数",
      },
      {
        id: "s3",
        label: "本月摄像头事件",
      },
    ],
  },
]);
const safeShow = reactive({
  s1Show: true,
  s2Show: true,
  s3Show: true,
});
const isSafeNeedExpand = computed(() => {
  let arr = [];
  arr.push(safeShow.s1Show);
  arr.push(safeShow.s2Show);
  arr.push(safeShow.s3Show);
  return _.compact(arr).length > 1;
});
const isSafeExpand = ref(false);

//进度树形
const progressTree = reactive([
  {
    id: "pm",
    label: "进度模块",
    children: [
      {
        id: "p1",
        label: "本月指数趋势",
      },
      {
        id: "p2",
        label: "本月进度一栏",
      },
      {
        id: "p3",
        label: "本月摄像头事件",
      },
    ],
  },
]);
const progressShow = reactive({
  p1Show: true,
  p2Show: true,
  p3Show: true,
});

const isProgressExpand = ref(false);
//环境树形
const environmentTree = reactive([
  {
    id: "em",
    label: "环境模块",
    children: [
      {
        id: "e1",
        label: "本月指数趋势",
      },
      {
        id: "e2",
        label: "本月进度一栏",
      },
      {
        id: "e3",
        label: "本月摄像头事件",
      },
    ],
  },
]);
const environmentShow = reactive({
  e1Show: true,
  e2Show: true,
  e3Show: true,
});
const isEnvironmentNeedExpand = computed(() => {
  let arr = [];
  arr.push(environmentShow.e1Show);
  arr.push(environmentShow.e2Show);
  arr.push(environmentShow.e3Show);
  return _.compact(arr).length > 1;
});
const isEnvironmentExpand = ref(false);

//模块选择
//安全模块数据
let safeModuleData = reactive({
  score: 100,
  reason: "",
  reasonList: [],
  trendData: [],
  trendType: "line",
  accidentData: [
    { value: 1048, name: "事件1" },
    { value: 735, name: "事件2" },
    { value: 580, name: "事件3" },
    { value: 484, name: "事件4" },
    { value: 300, name: "事件5" },
  ],
  videoData: [],
  videoType: "bar",
});
//进度模块数据
let progressModuleData = reactive({
  score: 99,
  reason: "",
  reasonList: [],
  progressData: [
    85, 92, 73, 94, 87, 95, 51, 85, 92, 73, 94, 87, 95, 51, 85, 92, 73, 94, 87,
    95, 51, 85, 92, 73, 94, 87, 95, 51, 87, 54,
  ],
  progressType: "line",
  tableData: [
    {
      buildingNum: "1#",
      f1: 0,
      f2: 0,
      f3: 2,
      f4: 0,
      f5: 1,
      f6: 0,
      f7: 0,
      f8: 0,
      f9: 3,
      f10: 3,
      f11: 3,
      f12: 3,
    },
    {
      buildingNum: "2#",
      f1: 0,
      f2: 0,
      f3: 2,
      f4: 0,
      f5: 0,
      f6: 1,
      f7: 0,
      f8: 2,
      f9: 3,
      f10: 3,
      f11: 3,
      f12: 3,
    },
    {
      buildingNum: "3#",
      f1: 0,
      f2: 0,
      f3: 2,
      f4: 1,
      f5: 1,
      f6: 2,
      f7: 0,
      f8: 4,
      f9: 3,
      f10: 3,
      f11: 3,
      f12: 3,
    },
    {
      buildingNum: "4#",
      f1: 0,
      f2: 0,
      f3: 2,
      f4: 0,
      f5: 2,
      f6: 0,
      f7: 0,
      f8: 0,
      f9: 2,
      f10: 3,
      f11: 3,
      f12: 3,
    },
    {
      buildingNum: "5#",
      f1: 0,
      f2: 0,
      f3: 2,
      f4: 0,
      f5: 1,
      f6: 0,
      f7: 1,
      f8: 0,
      f9: 1,
      f10: 3,
      f11: 3,
      f12: 3,
    },
    {
      buildingNum: "6#",
      f1: 0,
      f2: 0,
      f3: 2,
      f4: 0,
      f5: 1,
      f6: 0,
      f7: 0,
      f8: 0,
      f9: 2,
      f10: 1,
      f11: 3,
      f12: 3,
    },
  ],
  accidentData: [
    25, 40, 35, 35, 40, 51, 32, 25, 40, 35, 35, 40, 51, 32, 25, 40, 35, 35, 40,
    51, 32, 25, 40, 35, 35, 40, 51, 32, 56, 43,
  ],
  accidentType: "bar",
});
//环境模块数据
let environmentModuleData = reactive({
  score: 100,
  reason: "",
  reasonList: [],
  trendData: [
    85, 92, 73, 94, 87, 95, 51, 85, 92, 73, 94, 87, 95, 51, 85, 92, 73, 94, 87,
    95, 51, 85, 92, 73, 94, 87, 95, 51, 87, 54,
  ],
  trendType: "line",
  accidentData: [
    { value: 1048, name: "事件1" },
    { value: 735, name: "事件2" },
    { value: 580, name: "事件3" },
    { value: 484, name: "事件4" },
    { value: 300, name: "事件5" },
  ],
  videoData: [
    25, 40, 35, 35, 40, 51, 32, 25, 40, 35, 35, 40, 51, 32, 25, 40, 35, 35, 40,
    51, 32, 25, 40, 35, 35, 40, 51, 32, 56, 43,
  ],
  videoType: "bar",
});

//事件趋势指数
function initSafeTrendChart(type) {
  let safeTrendDom = document.getElementById("safeTrendChart");
  let safeTrendChart = echarts.init(safeTrendDom);
  safeTrendChart.clear();
  let option = null;
  let monthLength = moment(props.currentDate).daysInMonth();
  let monthDateList = [];
  for (let i = 0; i < monthLength; i++) {
    monthDateList.push((i + 1).toString());
  }
  if (type == "bar") {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: monthDateList,
        axisLabel: {
          interval: 0,
          // rotate: 45,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#939393 ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：分",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "评分",
          data: safeModuleData.trendData,
          type: "bar",
          barWidth: 25,
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#E7CFFC", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#8DB6FB", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  } else {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        // formatter(params) {
        //     // 返回值就是html代码可以使用标签
        //     return `
        //         时刻：${params.data.title} </br>
        //         分数：${params.data.value}
        //     `;
        // },
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: monthDateList,
        axisLabel: {
          interval: 0,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#8E8E8E ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：分",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "评分",
          data: safeModuleData.trendData,
          type: "line",
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#E7CFFC", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#8DB6FB", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  }
  option && safeTrendChart.setOption(option);
}
function switchSafeTrendChart(type) {
  safeModuleData.trendType = type;
  initSafeTrendChart(type);
}

//事件发生数
function initSafeAccidentChart() {
  var chartDom = document.getElementById("safeAccidentChart");
  var myChart = echarts.init(chartDom);
  myChart.clear();
  var option;
  option = {
    color: ["#749FFA", "#83CFEF", "#EB7F67", "#F8C747", "#7585A2"],
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      top: "20%",
      left: "50%",
      itemWidth: 30, // 标志图形的长度
      itemHeight: 15, // 标志图形的宽度
      itemGap: 40,
    },
    series: [
      {
        name: "事件发生数",
        type: "pie",
        radius: ["40%", "70%"],
        center: ["38%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
          normal: {
            label: {
              show: true,
              position: "outside",
              color: "#000",
              formatter: function (params) {
                var percent = 0;
                var total = 0;
                for (var i = 0; i < safeModuleData.accidentData.length; i++) {
                  total += safeModuleData.accidentData[i].value;
                }
                percent = ((params.value / total) * 100).toFixed(0);
                if (params.name !== "") {
                  return params.name + "\n" + percent + "%";
                } else {
                  return "";
                }
              },
            },
            labelLine: {
              length: 5,
              length2: 15,
              show: true,
              color: "#000",
            },
          },
        },
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: safeModuleData.accidentData,
      },
    ],
  };
  option && myChart.setOption(option);
}

//摄像头事件
function initSafeVideoChart(type) {
  let safeVideoDom = document.getElementById("safeVideoChart");
  let safeVideoChart = echarts.init(safeVideoDom);
  safeVideoChart.clear();
  let option = null;
  let monthLength = moment(props.currentDate).daysInMonth();
  let monthDateList = [];
  for (let i = 0; i < monthLength; i++) {
    monthDateList.push((i + 1).toString());
  }
  if (type == "bar") {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: monthDateList,
        axisLabel: {
          interval: 0,
          // rotate: 45,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#939393 ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：件",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "件数",
          data: safeModuleData.videoData,
          type: "bar",
          barWidth: 25,
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#E7CFFC", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#8DB6FB", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  } else {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: monthDateList,
        axisLabel: {
          interval: 0,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#8E8E8E ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：件",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "件数",
          data: safeModuleData.videoData,
          type: "line",
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#E7CFFC", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#8DB6FB", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  }
  option && safeVideoChart.setOption(option);
}

function switchSafeVideoChart(type) {
  safeModuleData.videoType = type;
  initSafeVideoChart(type);
}

//工地进度在本月指数
function initProgerssChart(type) {
  let progressDom = document.getElementById("progressChart");
  let progressChart = echarts.init(progressDom);
  progressChart.clear();
  let option = null;
  let monthLength = moment(props.currentDate).daysInMonth();
  let monthDateList = [];
  for (let i = 0; i < monthLength; i++) {
    monthDateList.push((i + 1).toString());
  }
  if (type == "bar") {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: monthDateList,
        axisLabel: {
          interval: 0,
          // rotate: 45,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#939393 ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：分",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "评分",
          data: progressModuleData.trendData,
          type: "bar",
          barWidth: 25,
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#749FFA", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#3F7ED2", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  } else {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: monthDateList,
        axisLabel: {
          interval: 0,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#8E8E8E ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：分",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "评分",
          data: progressModuleData.trendData,
          type: "line",
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#749FFA", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#3F7ED2", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  }
  option && progressChart.setOption(option);
}
function switchProgressChart(type) {
  progressModuleData.progressType = type;
  initProgerssChart(type);
}

//进度本月一栏
function initProgressAccidentChart(type) {
  let progressAccidentDom = document.getElementById("progressAccidentChart");
  let progressAccidentChart = echarts.init(progressAccidentDom);
  progressAccidentChart.clear();
  let option = null;
  let monthLength = moment(props.currentDate).daysInMonth();
  let monthDateList = [];
  for (let i = 0; i < monthLength; i++) {
    monthDateList.push((i + 1).toString());
  }
  if (type == "bar") {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: monthDateList,
        axisLabel: {
          interval: 0,
          // rotate: 45,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#939393 ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：件",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "事件",
          data: progressModuleData.accidentData,
          type: "bar",
          barWidth: 25,
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#CFE4FC", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#89A3F8", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  } else {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: monthDateList,
        axisLabel: {
          interval: 0,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#8E8E8E ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：件",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "事件",
          data: progressModuleData.accidentData,
          type: "line",
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#CFE4FC", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#89A3F8", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  }
  option && progressAccidentChart.setOption(option);
}
function switchProgressAccidentChart(type) {
  progressModuleData.accidentType = type;
  initProgressAccidentChart(type);
}

//环境趋势指数
function initEnvironmentTrendChart(type) {
  let environmentTrendDom = document.getElementById("environmentTrendChart");
  let environmentTrendChart = echarts.init(environmentTrendDom);
  environmentTrendChart.clear();
  let monthLength = moment(props.currentDate).daysInMonth();
  let monthDateList = [];
  for (let i = 0; i < monthLength; i++) {
    monthDateList.push((i + 1).toString());
  }
  let option = null;
  if (type == "bar") {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: monthDateList,
        axisLabel: {
          interval: 0,
          // rotate: 45,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#939393 ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：分",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "评分",
          data: environmentModuleData.trendData,
          type: "bar",
          barWidth: 25,
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#7CE4BE", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#3FC6D2", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  } else {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: monthDateList,
        axisLabel: {
          interval: 0,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#8E8E8E ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：分",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "评分",
          data: environmentModuleData.trendData,
          type: "line",
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#7CE4BE", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#3FC6D2", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  }
  option && environmentTrendChart.setOption(option);
}
function switchEnvironmentTrendChart(type) {
  environmentModuleData.trendType = type;
  initEnvironmentTrendChart(type);
}

//环境发生数
function initEnvironmentAccidentChart() {
  var chartDom = document.getElementById("environmentAccidentChart");
  var myChart = echarts.init(chartDom);
  myChart.clear();
  var option;
  option = {
    color: ["#749FFA", "#83CFEF", "#EB7F67", "#F8C747", "#7585A2"],
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      top: "20%",
      left: "50%",
      itemWidth: 30, // 标志图形的长度
      itemHeight: 15, // 标志图形的宽度
      itemGap: 40,
    },
    series: [
      {
        name: "事件发生数",
        type: "pie",
        radius: ["40%", "70%"],
        center: ["38%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
          normal: {
            label: {
              show: true,
              position: "outside",
              color: "#000",
              formatter: function (params) {
                var percent = 0;
                var total = 0;
                for (
                  var i = 0;
                  i < environmentModuleData.accidentData.length;
                  i++
                ) {
                  total += environmentModuleData.accidentData[i].value;
                }
                percent = ((params.value / total) * 100).toFixed(0);
                if (params.name !== "") {
                  return params.name + "\n" + percent + "%";
                } else {
                  return "";
                }
              },
            },
            labelLine: {
              length: 5,
              length2: 15,
              show: true,
              color: "#000",
            },
          },
        },
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: environmentModuleData.accidentData,
      },
    ],
  };
  option && myChart.setOption(option);
}

//环境摄像头事件
function initEnvironmentVideoChart(type) {
  let environmentVideoDom = document.getElementById("environmentVideoChart");
  let environmentVideoChart = echarts.init(environmentVideoDom);
  environmentVideoChart.clear();
  let option = null;
  let monthLength = moment(props.currentDate).daysInMonth();
  let monthDateList = [];
  for (let i = 0; i < monthLength; i++) {
    monthDateList.push((i + 1).toString());
  }
  if (type == "bar") {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: monthDateList,
        axisLabel: {
          interval: 0,
          // rotate: 45,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#939393 ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：件",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "件数",
          data: environmentModuleData.videoData,
          type: "bar",
          barWidth: 25,
          // barGap:'90%'
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#CFFCF1", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#1EB8A4", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  } else {
    option = {
      color: ["#FFD700"],
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 25,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: "category",
        data: monthDateList,
        axisLabel: {
          interval: 0,
          color: "#000",
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
          lineStyle: {
            color: "#8E8E8E ",
          },
        },
      },
      yAxis: {
        type: "value",
        name: "单位：件",
        //nameRotate: '90',
        nameLocation: "end",
        nameTextStyle: {
          // fontSize: 14,
          padding: [0, 0, 0, -10],
        },
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: true, //不显示坐标轴线
        },
        splitLine: {
          //网格线
          show: true,
        },
      },
      series: [
        {
          name: "件数",
          data: environmentModuleData.videoData,
          type: "line",
          itemStyle: {
            // 使用方法二的写法
            color: {
              type: "linear",
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0,
                  color: "#CFFCF1", // 0% 处的颜色
                },
                // {
                //     offset: 0.7,
                //     color: '#2378f7' // 70% 处的颜色
                // },
                {
                  offset: 1,
                  color: "#1EB8A4", // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
  }
  option && environmentVideoChart.setOption(option);
}

function switchEnvironmentVideoChart(type) {
  environmentModuleData.videoType = type;
  initEnvironmentVideoChart(type);
}

function html2Pdf() {
  //保留各模块的高度
  let safeModuleHeight =
    document.getElementsByClassName("safeChart")[0].style.height;
  let progressModuleHeight =
    document.getElementsByClassName("progressChart")[0].style.height;
  let environmentModuleHeight =
    document.getElementsByClassName("environmentChart")[0].style.height;
  document.getElementsByClassName("safeChart")[0].style.height = "unset";
  document.getElementsByClassName("progressChart")[0].style.height = "unset";
  document.getElementsByClassName("environmentChart")[0].style.height = "unset";

  document.getElementsByClassName("safeFooter")[0].style.opacity = 0;
  document.getElementsByClassName("progressFooter")[0].style.opacity = 0;
  document.getElementsByClassName("environmentFooter")[0].style.opacity = 0;

  document.getElementsByClassName("monthReportContainer")[0].scrollTop = 0;
  const monthReport = document.getElementsByClassName("monthReportContainer")[0]; // 需要导出部分页面的id名
  monthReport.style.position = "absolute";
  monthReport.style.width = "calc(100% - 253px)";
  monthReport.style.left = "0px";
  monthReport.style.top = "0px";
  const pdfDownLoader = new PdfLoader(monthReport, "fileName", "chartContent"); // fileName -->导出文件名,  question-table -->防止被截断的class名
  pdfDownLoader.outPutPdfFn(`${props.currentDate}${props.currentReportType}`);
  monthReport.style.position = "unset";
  monthReport.style.width = "100%";
  document.getElementsByClassName("safeChart")[0].style.height =
    safeModuleHeight;
  document.getElementsByClassName("progressChart")[0].style.height =
    progressModuleHeight;
  document.getElementsByClassName("environmentChart")[0].style.height =
    environmentModuleHeight;
  document.getElementsByClassName("safeFooter")[0].style.opacity = 1;
  document.getElementsByClassName("progressFooter")[0].style.opacity = 1;
  document.getElementsByClassName("environmentFooter")[0].style.opacity = 1;
}

//树形事件
function handleSafeCheck(self, all) {
  let selectedKeys = all.checkedKeys;
  let curId = self.id;
  switch (curId) {
    case "sm":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        safeShow.s1Show = true;
        safeShow.s2Show = true;
        safeShow.s3Show = true;
      } else {
        safeShow.s1Show = false;
        safeShow.s2Show = false;
        safeShow.s3Show = false;
      }
      break;
    case "s1":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        safeShow.s1Show = true;
      } else {
        safeShow.s1Show = false;
      }
      break;
    case "s2":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        safeShow.s2Show = true;
      } else {
        safeShow.s2Show = false;
      }
      break;
    case "s3":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        safeShow.s3Show = true;
      } else {
        safeShow.s3Show = false;
      }
      break;
  }
  let arr = [];
  arr.push(safeShow.s1Show);
  arr.push(safeShow.s2Show);
  arr.push(safeShow.s3Show);
  isSafeExpand.value = !(_.compact(arr).length > 1);
  if (_.compact(arr).length == 0) {
    document.getElementsByClassName("safeChart")[0].style.height = "0px";
  } else {
    document.getElementsByClassName("safeChart")[0].style.height = "240px";
  }
}
function handleProgressCheck(self, all) {
  let selectedKeys = all.checkedKeys;
  let curId = self.id;
  switch (curId) {
    case "pm":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        progressShow.p1Show = true;
        progressShow.p2Show = true;
        progressShow.p3Show = true;
      } else {
        progressShow.p1Show = false;
        progressShow.p2Show = false;
        progressShow.p3Show = false;
      }
      break;
    case "p1":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        progressShow.p1Show = true;
      } else {
        progressShow.p1Show = false;
      }
      break;
    case "p2":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        progressShow.p2Show = true;
      } else {
        progressShow.p2Show = false;
      }
      break;
    case "p3":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        progressShow.p3Show = true;
      } else {
        progressShow.p3Show = false;
      }
      break;
  }
  let arr = [];
  arr.push(progressShow.p1Show);
  arr.push(progressShow.p2Show);
  arr.push(progressShow.p3Show);
  isProgressExpand.value = !(_.compact(arr).length > 1);
  if (_.compact(arr).length == 0) {
    document.getElementsByClassName("progressChart")[0].style.height = "0px";
  } else {
    document.getElementsByClassName("progressChart")[0].style.height = "240px";
  }
}
function handleEnvironmentCheck(self, all) {
  let selectedKeys = all.checkedKeys;
  let curId = self.id;
  switch (curId) {
    case "em":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        environmentShow.e1Show = true;
        environmentShow.e2Show = true;
        environmentShow.e3Show = true;
      } else {
        environmentShow.e1Show = false;
        environmentShow.e2Show = false;
        environmentShow.e3Show = false;
      }
      break;
    case "e1":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        environmentShow.e1Show = true;
      } else {
        environmentShow.e1Show = false;
      }
      break;
    case "e2":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        environmentShow.e2Show = true;
      } else {
        environmentShow.e2Show = false;
      }
      break;
    case "e3":
      if (_.indexOf(selectedKeys, curId) >= 0) {
        environmentShow.e3Show = true;
      } else {
        environmentShow.e3Show = false;
      }
      break;
  }
  let arr = [];
  arr.push(environmentShow.e1Show);
  arr.push(environmentShow.e2Show);
  arr.push(environmentShow.e3Show);
  isEnvironmentExpand.value = !(_.compact(arr).length > 1);
  if (_.compact(arr).length == 0) {
    document.getElementsByClassName("environmentChart")[0].style.height = "0px";
  } else {
    document.getElementsByClassName("environmentChart")[0].style.height =
      "240px";
  }
}

function handleDown(type) {
  switch (type) {
    case "safe":
      let arr = [];
      arr.push(safeShow.s1Show);
      arr.push(safeShow.s2Show);
      arr.push(safeShow.s3Show);
      let length = _.compact(arr).length;
      if (length == 2) {
        document.getElementsByClassName("safeChart")[0].style.height = "470px";
      } else if (length == 3) {
        document.getElementsByClassName("safeChart")[0].style.height = "735px";
      }
      isSafeExpand.value = true;
      break;
    case "progress":
      let arr1 = [];
      arr1.push(progressShow.p1Show);
      arr1.push(progressShow.p2Show);
      arr1.push(progressShow.p3Show);
      let length1 = _.compact(arr1).length;
      if (length1 == 2) {
        document.getElementsByClassName("progressChart")[0].style.height =
          "514px";
      } else {
        document.getElementsByClassName("progressChart")[0].style.height =
          "758px";
      }
      isProgressExpand.value = true;
      break;
    case "environment":
      let arr2 = [];
      arr2.push(environmentShow.e1Show);
      arr2.push(environmentShow.e2Show);
      arr2.push(environmentShow.e3Show);
      let length2 = _.compact(arr2).length;
      if (length2 == 2) {
        document.getElementsByClassName("environmentChart")[0].style.height =
          "470px";
      } else {
        document.getElementsByClassName("environmentChart")[0].style.height =
          "735px";
      }
      isEnvironmentExpand.value = true;
      break;
  }
}

function handleUp(type) {
  switch (type) {
    case "safe":
      document.getElementsByClassName("safeChart")[0].style.height = "240px";
      isSafeExpand.value = false;
      break;
    case "progress":
      document.getElementsByClassName("progressChart")[0].style.height =
        "240px";
      isProgressExpand.value = false;
      break;
    case "environment":
      document.getElementsByClassName("environmentChart")[0].style.height =
        "240px";
      isEnvironmentExpand.value = false;
      break;
  }
}

//根据ID获取设备名称
function getDeviceNameById(id) {
  let name = "";
  for (let i = 0, l = proxy._GLOBAL.DEVICEINFO.length; i < l; i++) {
    if (id === proxy._GLOBAL.DEVICEINFO[i].deviceId) {
      name = proxy._GLOBAL.DEVICEINFO[i].deviceInfo;
      break;
    }
  }
  return name;
}

function initMonthReport() {
  api.report
    .getReportById({
      reportId: props.reportId,
    })
    .then((res) => {
      let resData = res.data[0];
      //安全模块
      let safeData = resData.safetyReport;
      safeModuleData.score = safeData.mark;
      safeModuleData.trendData = safeData.scoreTrendList;
      safeModuleData.videoData = safeData.dailyEventCountList;
      let safetyVideoData = []
      for (let i = 0; i < safeData.dailyEventCountList.length; i++) {
        safetyVideoData.push(safeData.dailyEventCountList[i].count)
      }
      safeModuleData.videoData = safetyVideoData
      safeModuleData.accidentData = safeData.zoneEventCountList.map((item) => {
        let name = ""
        if (item.zone == 0) name = "识别区"
        else if (item.zone == 1) name = "危险区"
        else if (item.zone == 2) name = "作业面"
        else if (item.zone == 3) name = "火灾烟雾区"
        return {
          name: name,
          value: item.count
        }
      });
      //进度模块
      let progressData = resData.progressReport;
      progressModuleData.score = progressData.mark;
      progressModuleData.trendData = progressData.scoreTrendList

      //环境模块
      let leanData = resData.leanReport;
      environmentModuleData.score = leanData.mark;
      environmentModuleData.trendData = leanData.scoreTrendList
      environmentModuleData.videoData = leanData.dailyEventCountList
      let environmentVideoData = []
      for (let i = 0; i < leanData.dailyEventCountList.length; i++) {
        environmentVideoData.push(leanData.dailyEventCountList[i].count)
      }
      environmentModuleData.videoData = environmentVideoData
      environmentModuleData.accidentData = leanData.typeEventCountList.map((item) => {
        let name = ""
        if (item.type == "workingArea") name = "作业面"
        else if (item.type == "mainChannel") name = "主通道"
        else if (item.type == "material") name = "材料堆放区"
        else if (item.type == "rubbishDump") name = "垃圾堆场"
        return {
          name: name,
          value: item.count
        }
      })
      //安全
      initSafeTrendChart("line");
      initSafeAccidentChart();
      initSafeVideoChart("bar");
      //进度
      initProgerssChart("line");
      initProgressAccidentChart("bar");
      //环境
      initEnvironmentTrendChart("line");
      initEnvironmentAccidentChart();
      initEnvironmentVideoChart("bar");
    });
}

onMounted(() => {
  initMonthReport();
});

watch(
  () => props.reportId,
  (newVal, oldVal) => {
    initMonthReport();
  }
);
</script>

<template>
  <div id="monthReport">
    <div class="monthReportContent">
      <div class="header">
        <span class="detail">{{ currentDate }}{{ currentReportType }}</span>
        <el-tree ref="safeTreeRef" :data="safeTree" show-checkbox node-key="id" highlight-current :props="defaultProps"
          class="safeTree" :default-checked-keys="['s1', 's2', 's3']" @check="handleSafeCheck" />
        <el-tree ref="progressTreeRef" :data="progressTree" show-checkbox node-key="id" highlight-current
          :props="defaultProps" class="progressTree" :default-checked-keys="['p1', 'p2', 'p3']"
          @check="handleProgressCheck" />
        <el-tree ref="environmentTreeRef" :data="environmentTree" show-checkbox node-key="id" highlight-current
          :props="defaultProps" class="environmentTree" :default-checked-keys="['e1', 'e2', 'e3']"
          @check="handleEnvironmentCheck" />
        <div class="exportBtn" @click="html2Pdf">导出 Pdf</div>
      </div>
      <div class="monthReportContainer">
        <div class="safeModule">
          <div class="safeModuleItem">
            <div class="title">
              <span class="score">安全模块一月平均得分：
                <el-tooltip placement="right-end" effect="light">
                  <template #content>
                    <!-- <scoreDetail></scoreDetail> -->
                    <SafeScoreDetail></SafeScoreDetail>
                  </template>
                  <img class="infoImg" src="@/assets/images/report/info.png" />
                </el-tooltip>
                <span class="colorText">{{ safeModuleData.score }}</span></span>
            </div>
            <div class="safeChart">
              <div class="chartContent" v-show="safeShow.s1Show">
                <div class="charttitle">
                  <span class="titleName">安全本月指数趋势</span>
                  <div class="fastChange">
                    <div :class="[
                      safeModuleData.trendType == 'bar' ? 'active' : '',
                      'bar',
                    ]" @click="switchSafeTrendChart('bar')"></div>
                    <div :class="[
                      safeModuleData.trendType == 'line' ? 'active' : '',
                      'line',
                    ]" @click="switchSafeTrendChart('line')"></div>
                  </div>
                </div>
                <div id="safeTrendChart" class="chartEle"></div>
              </div>
              <div class="chartContent" style="margin-top: 5px" v-show="safeShow.s2Show">
                <div class="charttitle">
                  <span class="titleName">安全本月事件发生数</span>
                </div>
                <div id="safeAccidentChart" class="chartEle"></div>
              </div>
              <div class="chartContent" style="margin-top: 5px" v-show="safeShow.s3Show">
                <div class="charttitle">
                  <span class="titleName">安全本月摄像头事件</span>
                  <div class="fastChange">
                    <div :class="[
                      safeModuleData.videoType == 'bar' ? 'active' : '',
                      'bar',
                    ]" @click="switchSafeVideoChart('bar')"></div>
                    <div :class="[
                      safeModuleData.videoType == 'line' ? 'active' : '',
                      'line',
                    ]" @click="switchSafeVideoChart('line')"></div>
                  </div>
                </div>
                <div id="safeVideoChart" class="chartEle"></div>
              </div>
            </div>
            <div class="footer safeFooter" v-if="isSafeNeedExpand">
              <img v-if="isSafeExpand" src="@/assets/images/report/up.png" @click="handleUp('safe')" />
              <img v-else src="@/assets/images/report/down.png" @click="handleDown('safe')" />
            </div>
          </div>
        </div>
        <div class="progressModule">
          <div class="progressModuleItem">
            <div class="title">
              <span class="score">进度模块一月平均得分：
                <el-tooltip placement="right-end" effect="light">
                  <template #content>
                    <!-- <scoreDetail></scoreDetail> -->
                    <ProcessScoreDetail></ProcessScoreDetail>
                  </template>
                  <img class="infoImg" src="@/assets/images/report/info.png" />
                </el-tooltip>
                <span class="colorText">{{
                  progressModuleData.score
                }}</span></span>
            </div>
            <div class="progressChart">
              <div class="chartContent" v-show="progressShow.p1Show">
                <div class="charttitle">
                  <span class="titleName">工地进度本月指数</span>
                  <div class="fastChange">
                    <div :class="[
                      progressModuleData.progressType == 'bar'
                        ? 'active'
                        : '',
                      'bar',
                    ]" @click="switchProgressChart('bar')"></div>
                    <div :class="[
                      progressModuleData.progressType == 'line'
                        ? 'active'
                        : '',
                      'line',
                    ]" @click="switchProgressChart('line')"></div>
                  </div>
                </div>
                <div id="progressChart" class="chartEle"></div>
              </div>
              <div class="chartContent" style="margin-top: 5px" v-show="progressShow.p2Show">
                <div class="charttitle">
                  <span class="titleName">工地进度一栏</span>
                </div>
                <div class="progressTable chartEle">
                  <el-table :data="progressModuleData.tableData" stripe style="width: 100%"
                    :header-cell-style="{ background: '#ECEDFF' }" height="240">
                    <el-table-column prop="buildingNum" label="楼号" align="center" />
                    <el-table-column prop="f1" label="1F" align="center">
                      <template #default="scope">
                        <i :class="['progress' + scope.row.f1, 'colorSpan']"></i>
                      </template>
                    </el-table-column>
                    <el-table-column prop="f2" label="2F" align="center">
                      <template #default="scope">
                        <i :class="['progress' + scope.row.f2, 'colorSpan']"></i>
                      </template>
                    </el-table-column>
                    <el-table-column prop="f3" label="3F" align="center">
                      <template #default="scope">
                        <i :class="['progress' + scope.row.f3, 'colorSpan']"></i>
                      </template>
                    </el-table-column>
                    <el-table-column prop="f4" label="4F" align="center">
                      <template #default="scope">
                        <i :class="['progress' + scope.row.f4, 'colorSpan']"></i>
                      </template>
                    </el-table-column>
                    <el-table-column prop="f5" label="5F" align="center">
                      <template #default="scope">
                        <i :class="['progress' + scope.row.f5, 'colorSpan']"></i>
                      </template>
                    </el-table-column>
                    <el-table-column prop="f6" label="6F" align="center">
                      <template #default="scope">
                        <i :class="['progress' + scope.row.f6, 'colorSpan']"></i>
                      </template>
                    </el-table-column>
                    <el-table-column prop="f7" label="7F" align="center">
                      <template #default="scope">
                        <i :class="['progress' + scope.row.f7, 'colorSpan']"></i>
                      </template>
                    </el-table-column>
                    <el-table-column prop="f8" label="8F" align="center">
                      <template #default="scope">
                        <i :class="['progress' + scope.row.f8, 'colorSpan']"></i>
                      </template>
                    </el-table-column>
                    <el-table-column prop="f9" label="9F" align="center">
                      <template #default="scope">
                        <i :class="['progress' + scope.row.f9, 'colorSpan']"></i>
                      </template>
                    </el-table-column>
                    <el-table-column prop="f10" label="10F" align="center">
                      <template #default="scope">
                        <i :class="['progress' + scope.row.f10, 'colorSpan']"></i>
                      </template>
                    </el-table-column>
                    <el-table-column prop="f11" label="11F" align="center">
                      <template #default="scope">
                        <i :class="['progress' + scope.row.f11, 'colorSpan']"></i>
                      </template>
                    </el-table-column>
                    <el-table-column prop="f12" label="12F" align="center">
                      <template #default="scope">
                        <i :class="['progress' + scope.row.f12, 'colorSpan']"></i>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <div class="chartContent" style="margin-top: 5px" v-show="progressShow.p3Show">
                <div class="charttitle">
                  <span class="titleName">工地进度一栏</span>
                  <div class="fastChange">
                    <div :class="[
                      progressModuleData.accidentType == 'bar'
                        ? 'active'
                        : '',
                      'bar',
                    ]" @click="switchProgressAccidentChart('bar')"></div>
                    <div :class="[
                      progressModuleData.accidentType == 'line'
                        ? 'active'
                        : '',
                      'line',
                    ]" @click="switchProgressAccidentChart('line')"></div>
                  </div>
                </div>
                <div id="progressAccidentChart" class="chartEle"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="environmentModule">
          <div class="environmentModuleItem">
            <div class="title">
              <span class="score">环境模块一月平均得分：
                <el-tooltip placement="right-end" effect="light">
                  <template #content>
                    <!-- <scoreDetail></scoreDetail> -->
                    <EnvironmentScoreDetail></EnvironmentScoreDetail>
                  </template>
                  <img class="infoImg" src="@/assets/images/report/info.png" />
                </el-tooltip>
                <span class="colorText">{{
                  environmentModuleData.score
                }}</span></span>
            </div>
            <div class="environmentChart">
              <div class="chartContent" v-show="environmentShow.e1Show">
                <div class="charttitle">
                  <span class="titleName">环境本月指数趋势</span>
                  <div class="fastChange">
                    <div :class="[
                      environmentModuleData.trendType == 'bar'
                        ? 'active'
                        : '',
                      'bar',
                    ]" @click="switchEnvironmentTrendChart('bar')"></div>
                    <div :class="[
                      environmentModuleData.trendType == 'line'
                        ? 'active'
                        : '',
                      'line',
                    ]" @click="switchEnvironmentTrendChart('line')"></div>
                  </div>
                </div>
                <div id="environmentTrendChart" class="chartEle"></div>
              </div>
              <div class="chartContent" style="margin-top: 5px" v-show="environmentShow.e2Show">
                <div class="charttitle">
                  <span class="titleName">环境本月事件发生数</span>
                </div>
                <div id="environmentAccidentChart" class="chartEle"></div>
              </div>
              <div class="chartContent" style="margin-top: 5px" v-show="environmentShow.e3Show">
                <div class="charttitle">
                  <span class="titleName">环境本月摄像头事件</span>
                  <div class="fastChange">
                    <div :class="[
                      environmentModuleData.videoType == 'bar'
                        ? 'active'
                        : '',
                      'bar',
                    ]" @click="switchEnvironmentVideoChart('bar')"></div>
                    <div :class="[
                      environmentModuleData.videoType == 'line'
                        ? 'active'
                        : '',
                      'line',
                    ]" @click="switchEnvironmentVideoChart('line')"></div>
                  </div>
                </div>
                <div id="environmentVideoChart" class="chartEle"></div>
              </div>
            </div>
            <div class="footer environmentFooter" v-if="isEnvironmentNeedExpand">
              <img v-if="isEnvironmentExpand" src="@/assets/images/report/up.png" @click="handleUp('environment')" />
              <img v-else src="@/assets/images/report/down.png" @click="handleDown('environment')" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#monthReport {
  width: 100%;
  height: 100%;

  .monthReportContent {
    .header {
      height: 30px;
      position: relative;

      .detail {
        display: inline-block;
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 500;
        padding: 0 10px;
        margin: 0px 35px 0px 15px;
        background-color: #efeefe;
        border: 1px solid white;
        border-radius: 5px;
      }

      .exportBtn {
        display: inline-block;
        float: right;
        width: 66px;
        height: 30px;
        color: white;
        line-height: 30px;
        padding-left: 30px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("@/assets/images/report/export.png");
        cursor: pointer;
      }
    }

    .monthReportContainer {
      height: calc(100vh - 130px);
      overflow-y: auto;
      overflow-x: hidden;

      .safeModule {
        width: 1640px;
        width: 100%;
        margin: 0 auto;
        margin-top: 10px;
        border: 1px solid #eef3fd;
        box-shadow: 0px 0px 4px 0px #eceefc;
        border-radius: 6px;
        background-color: white;
      }

      .progressModule {
        width: 1640px;
        width: 100%;
        margin: 0 auto;
        margin-top: 10px;
        border: 1px solid #eef3fd;
        box-shadow: 0px 0px 4px 0px #eceefc;
        border-radius: 6px;
        background-color: white;
      }

      .environmentModule {
        width: 1640px;
        width: 100%;
        margin: 0 auto;
        margin-top: 10px;
        border: 1px solid #eef3fd;
        box-shadow: 0px 0px 4px 0px #eceefc;
        border-radius: 6px;
        background-color: white;
      }
    }
  }
}

.title {
  height: 50px;
  line-height: 40px;

  .titleName {
    display: inline-block;
    height: 22px;
    line-height: 22px;
    margin-left: 10px;
    padding-left: 5px;
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: 600;
    border-left: 3px solid #8f93f7;
  }

  .score {
    padding-left: 15px;
  }

  .reason {
    padding-left: 25px;
  }
}

.colorText {
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: #8f93f7;
  padding-left: 10px;
}

.infoImg {
  width: 15px;
  height: 15px;
  vertical-align: middle;
}

#safeTrendChart {
  width: 1600px;
  width: 100%;
  height: 220px;
  margin: 0 auto;
}

#safeAccidentChart {
  width: 1600px;
  width: 100%;
  height: 220px;
  margin: 0 auto;
}

#safeVideoChart {
  width: 1600px;
  width: 100%;
  height: 220px;
  margin: 0 auto;
}

#progressChart {
  width: 1600px;
  width: 100%;
  height: 220px;
  margin: 0 auto;
}

#progressAccidentChart {
  width: 1600px;
  width: 100%;
  height: 220px;
  margin: 0 auto;
}

#environmentTrendChart {
  width: 1600px;
  width: 100%;
  height: 220px;
  margin: 0 auto;
}

#environmentAccidentChart {
  width: 1600px;
  width: 100%;
  height: 220px;
  margin: 0 auto;
}

#environmentVideoChart {
  width: 1600px;
  width: 100%;
  height: 220px;
  margin: 0 auto;
}

.chartContent {
  position: relative;

  .charttitle {
    .titleName {
      display: inline-block;
      height: 22px;
      line-height: 22px;
      margin-left: 10px;
      padding-left: 5px;
      font-size: 15px;
      font-family: Source Han Sans SC;
      font-weight: 600;
      border-left: 3px solid #8f93f7;
    }

    .fastChange {
      position: absolute;
      top: 0px;
      right: 35px;
      z-index: 99999;

      .bar {
        display: inline-block;
        width: 22px;
        height: 22px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("@/assets/images/report/zhu.png");
        cursor: pointer;

        &.active {
          background-image: url("@/assets/images/report/zhuA.png");
        }
      }

      .line {
        display: inline-block;
        width: 22px;
        height: 22px;
        margin-left: 13px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("@/assets/images/report/zhe.png");
        cursor: pointer;

        &.active {
          background-image: url("@/assets/images/report/zheA.png");
        }
      }
    }
  }
}

.colorSpan {
  display: inline-block;
  width: 30px;
  height: 15px;
  border-radius: 5px;
}

.progress0 {
  background-color: #80e7bf;
}

.progress1 {
  background-color: #fedb4c;
}

.progress2 {
  background-color: #f57861;
}

.progress3 {
  background-color: #e7eaed;
}

:deep(.el-tree) {
  display: inline-block;
  position: absolute;
}

.safeTree {
  left: 230px;
}

.progressTree {
  left: 400px;
}

.environmentTree {
  left: 570px;
}

.footer {
  text-align: center;

  img {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
}

.safeChart {
  height: 240px;
  overflow: hidden;
}

.progressChart {
  height: 240px;
  overflow: hidden;
}

.environmentChart {
  height: 240px;
  overflow: hidden;
}
</style>
